<template>
  <div class="night">
    <div class="company-title mt-1">纳税分布</div>
    <div class="flex align-center">
      <div id="company-chart04"></div>

      <div class="flex-1">
        <div class="flex lengeds" v-for="(items, i) in firstData" :key="i">
          <div
            class="tipcolor"
            :style="{ 'background-color': colorList[i] }"
          ></div>
          <div class="flex align-center">
            <p class="names mr-2">{{ items.name }}</p>
            <div class="flex">
              <div class="num">{{ items.value }}万元</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts");
import companyApi from "@/api/company/index";
export default {
  name: "companyNight",
  data() {
    return {
      colorList: [
        '#5757a5', '#602d53', '#fa2f06',
        '#51cf66', '#eaa76d', '#ed6fa4',
        '#79d224', '#7069a1', '#64bf1d',
        '#031523', '#044e38', '#7fce1e',
        '#30bb16', '#78c218', '#1e6e83',
        '#8bad05', '#93db3e', '#4765a4',
        '#5397b0', '#eb6b6b', '#37337f',
        '#2a508f', '#53d15f', '#9d91a4',
        '#44aeb8', '#e1a10c', '#8d809b',
        '#eab728', '#1a9244', '#e52e07'
      ],
      firstData: [
        {
          value: 20,
          name: "增值税",
          ratio: "20%",
        },
        {
          value: 26,
          name: "资源税",
          ratio: "26%",
        },
        {
          value: 8,
          name: "企业所得税",
          ratio: "8%",
        },
        {
          value: 5,
          name: "其他税费",
          ratio: "5%",
        },
        {
          value: 7,
          name: "环保税",
          ratio: "7%",
        },
        {
          value: 2,
          name: "环保税",
          ratio: "2%",
        },
        {
          value: 20,
          name: "水资源税",
          ratio: "20%",
        },
      ],
    };
  },
  mounted() { 
    this.getxssjzs()
  },
  methods: {
    getxssjzs() {
      let that = this;
      companyApi
        .dataNight({longCompanyId:this.$route.query.longCompanyId})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.firstData = res;            
            that.draw();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    draw() {
      let that = this
      var drawCharts = document.getElementById("company-chart04"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}万元 ({d}%)",
        },
        title: {
          text: "纳税分布占比",
          // subtext: "302户",
          x: "center",
          y: "center",
          // top: "42%",
          left: "38%",
          textAlign: "center",
          textStyle: {
            // fontWeight: "600",
            fontSize: that.getRealPX(20),
            color: "#00E4FF",
          },
          subtextStyle: {
            fontWeight: "600",
            fontSize: that.getRealPX(15),
            color: "#EF4864",
          },
        },
        color:that.colorList,
        series: [
          {
            name: "1-10月企业类型",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["40%", "50%"],
            // roseType: "radius",
            label: {
              normal: {
                show: true,
                position: "inner",
                formatter: function (params) {
                  return params.name + "\n" + params.percent + "%";
                },
                textStyle: {
                  fontWeight: "600",
                  fontSize: that.getRealPX(12),
                  color: "#fff",
                },
              },
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true,
            },
            data: this.firstData,
          },
        ],
      };
      drawChart.setOption(option);
    },
  },
};
</script>
<style lang="stylus" scoped>
.text-main {
  color: #007FFE;
}

#company-chart04 {
  width: 60%;
  height: 400px;
}

.night {
  width: 570px;
  height: 500px; 
  background: url('../../../assets/img/company/bg06.png') no-repeat;
  background-size: 570px 500px;
}
.lengeds {
  text-align: left;
  margin-bottom: 5px;
  font-size: 16px;
  color: #40E6FF;

  .tipcolor {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: 4px;
  }

  .names {
    color: #ffffff;
    // margin-bottom: 6px;
  }

  .num {
    min-width: 60px;
  }
}
</style>
